<template>
  <div class="comments-container">
    <!-- 评分 -->
    <div class="rate-score-box" >
      <div class="overall-box">
        <div class="overall-score">{{rateScore.overall_score|fixedNum}}</div>
        <div class="overall-text">综合评价</div>
        <div class="compare_rating">
          高于周边商家{{rateScore.compare_rating|toPercent}}
        </div>
      </div>
      <div class="score-detail-box" v-if="rateScore.service_score">
        <div class="service-row">
          <span class="score-label">服务态度</span>
          <van-rate v-model="rateScore.service_score" 
          readonly allow-half/>
          <span class="score">{{rateScore.service_score|fixedNum}}</span>
        </div>
        <div class="food-row">
          <span class="score-label">菜品评价</span>
          <van-rate v-model="rateScore.food_score" 
          readonly allow-half/>
          <span class="score">{{rateScore.food_score|fixedNum}}</span>
        </div>
        <div class="deliver-row">
          <span class="score-label">送达时间</span>
          <span style="color:#999">{{rateScore.deliver_time}}分钟</span>
        </div>
      </div>
    
    </div>
    <div style="width:100%;height:.12rem;background-color:#f5f5f5;"></div>
    <!-- 评价标签 -->
    <!-- 在父元素上绑定点击事件 -->
    <div class="rate-tags" @click="handleTagClick">
      <span 
        :data-tag-id="tag._id"
        :class="{'rate-tag':true, 'rate-tag-unsatisfied':tag.unsatisfied, 'rate-tag-active':activeTagId===tag._id}" 
        v-for="tag in rateTags" :key="tag._id"
      >{{tag|tagText}}
      </span>
    </div>
    <!-- 评论（评论） -->
    <div class="comment-box">
      <div class="comment-item"
        v-for="comt in comments" :key="comt._id"
      >
        <img class="user-avatar" :src="getImgPath(comt.avatar)" alt="">
        <div class="user-comment">
          <span class="comment-date">{{comt.rated_at}}</span>
          <div class="username">{{comt.username}}</div>
          <van-rate class="comment-star" v-model="comt.rating_star" 
            readonly 
            allow-half 
          />
          <div class="comment-text">过于好吃</div>
          <div class="comment-img-wrap">
            <div class="comment-img" 
              v-for="item in comt.item_ratings"
              :key="item._id"
            >
              <img class="food-img" :src="getImgPath(item.image_hash)" alt="">
            </div>
          </div>
           <div class="comment-foodname-wrap">
             <span class="foodname" v-for="item in comt.item_ratings" :key="item._id">
               {{item.food_name}}
             </span>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getRateScores,
  getRateTags,
  getRateComments
} from '../../../api/restaurant'
import {getImgPath} from '../../../components/mixins'
export default {
  mixins:[getImgPath],
  props:{
    shopId:null
  },
  created(){
    this.getRateScoreList()
    this.getRateTagList()
    this.getCommentList()
  },
  data(){
    return {
      commentsOffset:0,
      commentsLimit:10,
      rateScore:{},
      rateTags:[],
      comments:[],
      activeTagId:null
    }
  },
  computed:{
    tagName(){
      const tag = this.rateTags.find(item=>{
        if(item._id === this.activeTagId)
        return item
      })
      let tagName = null
      if(tag){
        tagName = tag.name
      }
      return tagName
    }
  },
  filters:{
    fixedNum(num){
      if(num === undefined){
        return ''
      }
      return num.toFixed(1)
    },
    tagText(tag){
      return `${tag.name}(${tag.count})`
    }
  },
  methods:{
    async getRateScoreList(){
      try {
        const data = await getRateScores(this.shopId)
        console.log('score');
        console.log(data);
        this.rateScore = data
      } catch (err) {
        console.log(err);
      }
    },
    async getRateTagList(){
      try {
        const data = await getRateTags(this.shopId)
        console.log('tag');
        console.log(data);
        this.rateTags = data
        if(data.length){
          this.activeTagId = data[0]._id
        }
      } catch (err) {
        console.log(err);
      }
    },
    async getCommentList(){
      try {
        const data = await getRateComments(this.shopId,{
          tag_name: this.tagName,
          offset: this.commentsOffset,
          limit: this.commentsLimit
        })
        console.log('comments');
        console.log(data);
        this.comments = data
      } catch (err) {
        console.log(err);
      }
    },
    
    handleTagClick(e){
      const target = e.target?e.target:e.srcElement
      if(target){
        if(target.tagName==='SPAN'){
          this.activeTagId = e.target.dataset.tagId
          // 重新请求数据
          this.getCommentList()
        }
      }
      
    }

  }
}
</script>
<style lang='scss' scoped>
@import '../../../styles/var.scss';
@import '../../../styles/mixin.scss';
.comments-container{
  /deep/ .van-icon-star{
    font-size: .12rem;
    color: #ff9a0d;
  }
  /deep/ .van-rate__icon{
    font-size: .12rem;
    color: #ff9a0d;
  }
  // 评分
  .rate-score-box{
    display: flex;
    padding: .18rem 0 .12rem;
    .overall-box{
      margin-left: .28rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .overall-score{
        font-size: .26rem;
        font-weight: 600;
        margin-bottom: .05rem;
        color: #f60;
      }
      .overall-text{
        margin-bottom: .08rem;
      }
      .compare_rating{
        font-size: .12rem;
        color: #999;
      }
    }
    .score-detail-box{
      flex: 1;
      margin-left: .16rem;
      .service-row{
        margin-bottom:.1rem;
      }
      .food-row{
        margin-bottom:.1rem;
      }
      .score-label{
        margin-right: .1rem;
      }
      .score{
        color: #f60;
        margin-left: .05rem;
        margin-top: -.09rem;
      }
    }
  }
  // 评价标签
  .rate-tags{
    display: flex;
    flex-wrap: wrap;
    padding: .1rem;
    .rate-tag{
      background-color: #ebf5ff;
      color: #6d7885;
      padding: .07rem;
      margin-right: .1rem;
      margin-bottom: .05rem;
      border-radius: .04rem;
    }
    .rate-tag-unsatisfied{
      background-color: #f5f5f5;
      color: #aaa;
    }
    .rate-tag-active{
      background-color: $primary;
      color: #FFF;
    }
  }
  // 评价（评论）
  .comment-box{
    margin: 0 .1rem;
    .comment-item{
      padding: .1rem 0;
      border-top: 1px solid #f5f5f5;
      display: flex;
      .user-avatar{
        height: .36rem;
        width: .36rem;
        border-radius: 50%;
      }
      .user-comment{
        margin-left: .1rem;
        flex: 1;
        position: relative;
        .comment-date{
          font-size: .12rem;
          color: #999;
          position: absolute;
          top: 0;
          right: 0;
        }
        .comment-star{
          margin-top: .1rem;
        }
        .comment-text{
          margin-top: .04rem;
        }
        .comment-img-wrap{
          margin-top: .04rem;
          display: flex;
          flex-wrap: wrap;
          .comment-img{
            .food-img {
              width: .7rem;
              height: .7rem;
              margin-right: .04rem;
            }
          }
        }
        .comment-foodname-wrap{
          margin-top: .04rem;
          display: flex;
          flex-wrap: wrap;
          .foodname{
            font-size: .12rem;
            display: inline-block;
            height: .3rem;
            width: .55rem;
            line-height: .3rem;
            border: 1px solid #ebebeb;
            border-radius: .04rem;
            margin-right: .1rem;
            padding-left: .04rem;
            @include text-ellipsis;
          }
        }
      }
    }
  }
}
</style>